<template>
    <div id="backGround">
        <Card style="width: 300px;margin-right:200px;margin-top: 200px;float:right;" title="欢迎登录低保救助服务管理平台">
            <Form ref="model" :model="model" :rules="ruleInline">
                <FormItem prop="username">
                    <Row>
                        <i-col span="24">
                            <Input type="text" v-model="model.username" placeholder="请输入用户名">
                            <Icon type="ios-person-outline" slot="prepend"></Icon>
                            </Input>
                        </i-col>
                    </Row>
                </FormItem>
                <FormItem prop="password">
                    <Row>
                        <i-col span="24">
                            <Input type="password" v-model="model.password" placeholder="请输入密码">
                            <Icon type="ios-lock-outline" slot="prepend"></Icon>
                            </Input>
                        </i-col>
                    </Row>

                </FormItem>
                <FormItem prop="code">
                    <Row>
                        <i-col span="14">
                            <Input type="text" v-model="model.code" placeholder="请输入验证码">
                            <Icon type="md-code" slot="prepend"></Icon>
                            </Input>
                        </i-col>
                        <i-col span="6" offset="2" id="codeImg">
                            <img :src="model.captchaImg" alt="..." @click="genVerifyCode()"
                                 style="width: 100%; ;height:100%"/>
                        </i-col>

                    </Row>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleLogin" style="width: 100%" :loading="btnLoading">登录
                    </Button>
                    <!--<div class="tabLogin">短信登录</div>-->
                </FormItem>
            </Form>
        </Card>
        <login-send-message ref="sendMessage" @ok="reset()"/>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    import {postAction, getAction} from '@/api/request'
    import cookie from 'js-cookie'
    import loginSendMessage from './login-send-message'
    import {CommonMixin} from '@/views/common/js/CommonMixin'
    import CryptoJS from 'crypto-js'

    export default {
        mixins: [CommonMixin],
        components: {
            loginSendMessage
        },
        data() {
            return {
                model: {
                    user: '',
                    password: '',
                    captchaImg: ''
                },
                btnLoading: false,
                ruleInline: {
                    username: [
                        {required: true, message: '用户名不能为空', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '密码不能为空', trigger: 'blur'},
                        {type: 'string', min: 6, message: '密码长度不能小于六位', trigger: 'blur'}
                    ],
                    code: [
                        {required: true, message: '验证码不能为空', trigger: 'blur'},
                    ]
                }
            }
        },
        created() {
            this.genVerifyCode();
        },
        mounted() {
            this.enterKeyup()
        },
        methods: {
            ...mapActions([
                'getUserInfo'
            ]),
            async beforeLogin(key) {
                let rest = await this.getUserInfo();
                //cookie.remove('token');
                if (rest.errcode === 0) {
                    this.$refs.sendMessage.edit(rest.data, key);
                    this.$refs.sendMessage.modalKey = this.uuid();
                } else {
                    this.btnLoading = false;
                    this.$router.push({path: '/login'});
                }
            },
            async handleLogin() {
                this.$refs['model'].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        let url = '/api/uc/sc/loginService/userLogin_encrypt';
                        let param = {};
                        param.username = this.model.username;
                        param.password = this.encrypt(this.model.password);
                        param.code = this.model.code;
                        postAction(url, param).then((res) => {
                            let data = null;
                            if (res.data.data) {
                                data = res.data.data;
                            } else if (res.data) {
                                data = res.data;
                            }
                            console.log(data);
                            if (data.errcode === 0) {
                                //cookie.set("token", data.key);
                                this.beforeLogin(data.key);
                            } else {
                                this.$Message.error(data.errmsg);
                                this.genVerifyCode();
                                this.btnLoading = false;
                            }
                        })
                    }
                })
            },
            genVerifyCode() {
                let url = '/api/ac/subsistence/VerifyCodeServiceImpl/genVerifyCode';
                getAction(url, {}).then((res) => {
                    if (res.data.errcode === 0) {
                        this.model.captchaImg = res.data.data;
                    } else {
                        this.model.captchaImg = '';
                    }
                })
            },
            // AES 加密方法
            encrypt(word) {
                // 和后端沟通后写死key和偏移量
                let key = CryptoJS.enc.Utf8.parse('asd8a6218921h123');
                let iv = CryptoJS.enc.Utf8.parse('iv_login_p3XxcC8');
                let srcs = CryptoJS.enc.Utf8.parse(word);
                var encrypted = CryptoJS.AES.encrypt(srcs, key, {
                    iv: iv,
                    mode: CryptoJS.mode.CBC,
                    padding: CryptoJS.pad.ZeroPadding
                });
                return CryptoJS.enc.Base64.stringify(encrypted.ciphertext)
            },
            reset() {
                this.btnLoading = false;
            },
            enterKeyup() {
                document.addEventListener('keydown', this.enterKey)
            },
            enterKey(event) {

                const code = event.keyCode
                    ? event.keyCode
                    : event.which
                        ? event.which
                        : event.charCode
                // // eslint-disable-next-line eqeqeq
                if (code == 13) {
                    this.handleLogin()
                }
            },
        },

    }
</script>

<style scoped>
    #backGround {
        background-image: url(./login-bg.jpg);
        width: 100%;
        height: 100%;
    }

    #codeImg {
        background: url(./404.jpg) no-repeat;
        background-size: 100% 100%;
        height: 32px;
        cursor: pointer;
    }

    /deep/ .ivu-form-item {
        margin-bottom: 24px;
    }
</style>
